<template>
  <div class="name">
    <el-form :model="form" label-width="80px" :rules="rules" ref="ruleFormRef">
      <!-- 账号 -->
      <el-form-item label="账号" prop="acctive">
        <el-input v-model="form.acctive" disabled />
      </el-form-item>
      <!-- 医务管理员,医生,护士,实习助理,药房 -->
      <el-form-item label="账号权限" prop="region">
        <el-select v-model="form.region" placeholder="请选择" disabled>
          <el-option label="医务管理员" value="医务管理员" />
          <el-option label="医生" value="医生" />
          <el-option label="护士" value="护士" />
          <el-option label="实习助理" value="实习助理" />
          <el-option label="药房" value="药房" />
        </el-select>
      </el-form-item>
      <!-- 旧密码 -->
      <el-form-item label="旧密码" prop="oldpwd">
        <el-input v-model="form.oldpwd" />
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item label="新密码" prop="newpwd">
        <el-input v-model="form.newpwd" />
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="form.idcard" />
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <!-- 请选择科室 -->
      <el-form-item label="科室更改" prop="department">
        <el-select v-model="form.department" placeholder="请选择科室">
          <el-option label="五官科" value="五官科" />
          <el-option label="儿科" value="儿科" />
          <el-option label="妇产科" value="妇产科" />
          <el-option label="外科" value="外科" />
          <el-option label="药房" value="药房" />
          <el-option label="内科" value="内科" />
          <el-option label="临床专科" value="临床专科" />
          <el-option label="内科" value="内科" />
        </el-select>
      </el-form-item>
      <el-form-item label="更改照片" prop="head">
        <el-upload class="avatar-uploader" :action=action :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.head" :src="form.head" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定修改</el-button>
        <el-button type="info">返回上一层</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { baseURL } from '@/uitls/request';
import { ElMessage } from 'element-plus'
import type { UploadProps, FormInstance, FormRules } from 'element-plus'

//
const ruleFormRef = ref<FormInstance>()
// 
const action = baseURL + "/users/uploadheader"


// 34
const form = reactive({
  id: 125,
  acctive: "admin@qq.com",
  region: "",
  number: 0,
  name: "",
  idcard: "",
  phone: "",
  department: "",
  head: "",
  oldpwd: "",
  newpwd: "",
})

const rules = reactive<FormRules>({
  oldpwd: [
    { required: true, message: '请输入旧密码', trigger: ['blur', 'change'] },
  ],
  newpwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 3, max: 6, message: '密码长度3-5位', trigger: 'blur' },
  ],
  idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { min: 11, max: 11, message: '身份证长度3-5位', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号长度11位', trigger: 'blur' },
  ],
  department: [
    { required: true, message: '请选择科室', trigger: 'blur' },
  ]

})

// id  newpwd密码   acctive部门 phone head
//图片上传成功的钩子
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  form.head = response.header_url
}
//图片上传之前的钩子函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const isJPG = rawFile.type === "image/jpeg" ||
    rawFile.type === "image/webp" ||
    rawFile.type === "image/bmp" ||
    rawFile.type === "image/jpg" ||
    rawFile.type === "image/png" ||
    rawFile.type === "image/gif" ||
    rawFile.type === "image/apng";
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG|webp|bmp|jpg|png|tif|gif|apng 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传头像图片大小不能超过2MB!')
    return false
  }
  return true
}

const emits = defineEmits(["scuure"])

const onSubmit = () => {
  // console.log(1111);
  // console.log(form);
    emits("scuure",form)
}
</script>

<style scoped>
.name {
  width: 500px;
  padding: 20px 0;
}

::v-deep .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

::v-deep.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>